<template>
	<view class="all">
		<view style="height: var(--status-bar-height);">
			<!-- app状态栏高度占位 -->
		</view>
		<view class="">
			<u-navbar title="新增房间"  @rightClick="rightClick" :autoBack="true">
				<view class="u-nav-slot" slot="right" style="color: #868686;">
					上传
				</view>
			</u-navbar>
		</view>
		<view class="roomPic">
			<view class="title">
				房间图片<text style="font-size: 24rpx;color: #242424;">(最多上传6张)</text>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="6" uploadIcon='plus' width="220rpx" height="170rpx"></u-upload>
			</view>
		</view>
		<view class="name">
			<view class="title">
				房间名称
			</view>
			<view class="content">
				  <u--input
				  :customStyle=test
				    placeholder="请输入内容"
				    border="surround"
					clearable
				    v-model="form.home_type"
					@blur="blur"
				  ></u--input>
			</view>
		</view>
		<view class="price">
			<view class="title">
				房间价格
			</view>
			<view class="content">
				  <u--input
				  :customStyle=test
				    placeholder="请输入内容"
				    border="surround"
					clearable
				    v-model="form.home_price"
				  ></u--input>
			</view>
		</view>
		<view class="area">
			<view class="title">
				房间面积
			</view>
			<view class="content">
				  <u--input
				  :customStyle=test
				    placeholder="请输入内容"
				    border="surround"
					clearable
				    v-model="form.home_size"
				  ></u--input>
			</view>
		</view>
		<view class="amount">
			<view class="title">
				房间数
			</view>
			<view class="content">
				  <u--input
				  :customStyle=test
				    placeholder="请输入内容"
				    border="surround"
					readonly
				    v-model="form.homeNum.length"
				  ></u--input>
			</view>
		</view>
		<view class="number">
			<view class="title">
				房间号
			</view>
			<view class="content">
				<view class="sinput" v-for="(item,index) in form.homeNum" :key='index'>
					<input type="text" v-model="item.value" class="inputs">
					<view class="del iconfont" @click="deletRoom(item)">
						&#xeca0;
					</view>
				</view>
				<view class="addinput iconfont" @click="addRoom">
					&#xe623;
				</view>
			</view>
		</view>
		<view class="describe">
			<view class="title">
				房间介绍
			</view>
			<view class="content">
				
				<u--textarea  v-model="form.home_detail"  autoHeight placeholder="请输入房间介绍" ></u--textarea>
			</view>
		</view>
		<view class="facility">
			<view class="title">
				房间设施
			</view>
			<view class="content">
				<u--textarea  v-model="form.home_facility"  autoHeight placeholder="请输入房间设施" ></u--textarea>
			</view>
		</view>
		<view class="tips">
			<view class="title">
				温馨提示
			</view>
			<view class="content">
				1.养老机构按照老人自愿入院的原则入住。<br>
				2.养老机构可能对老人提供流动服务与呼叫服务相结合。老人及子女若有增项服务，应该与院方协商，取得同意方可使用。<br>
				3.预约成功后，养老机构会收到您的预约信息，请等待工作人员与您联系。<br>
				4.预约成功后，欢迎您按预约时间前往养老院机构参观环境和现场查看房型。
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import{addHomeType} from '@/utils/api.js'
	export default {
		data() {
			return {
				test:{
					height:'100%',
					padding:'0 0 0 0',
					border:'none'
				},
				close3:true,
				fileList1: [],
				form:{
					home_type:'',
					home_price:'',
					home_size:'',
					homeNum:[],
					homeTypeImg:[],
					home_facility:'',
					home_detail:''
				},
				value1:'',
				value2:'',
				roomNum:[
					
				]
			};
		},
		methods:{
			blur(){
				
			},
			addRoom(){
				console.log(this.form.homeNum,'------');
				this.form.homeNum.push({value:''})
			},
			deletRoom(item){
				console.log(item,'ppppp');
				this.form.homeNum=this.form.homeNum.filter((item2)=>{
					return item2 !== item
				});
				console.log(this.form.homeNum,'8888');
			},
			rightClick(){
					if(!this.form.homeTypeImg.length){
						uni.showToast({
							title:'请上传房间图片！',
							icon:'none'
						})
						return
					}
					if(!this.form.home_type){
						uni.showToast({
							title:'请输入房间名称！',
							icon:'none'
						})
						return
					}
					if(!this.form.home_price){
						uni.showToast({
							title:'请输入房间价格！',
							icon:'none'
						})
						return
					}
					if(!this.form.home_size){
						uni.showToast({
							title:'请输入房间面积！',
							icon:'none'
						})
						return
					}
					if(!this.form.homeNum.length){
						uni.showToast({
							title:'请输入房间号！',
							icon:'none'
						})
						return
					}
					if(!this.form.home_detail){
						uni.showToast({
							title:'请输入房间介绍！',
							icon:'none'
						})
						return
					}
					if(!this.form.home_facility){
						uni.showToast({
							title:'请输入房间设施！',
							icon:'none'
						})
						return
					}
					
				console.log(this.form,'55555');
				let arr=[]
				this.form.homeNum.forEach((item)=>{
					arr.push(item.value)
				})
				console.log(arr,'arr');
				this.form.homeNum=arr
				addHomeType(this.form).then((res)=>{
					console.log(res);
					if(res.data.meta.status==200){
						uni.showToast({
							title:'添加房间成功！',
							icon:'success'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/room/room'
							})
						},1000)
					}
					else{
						uni.showToast({
							title:res.data.meta.status,
							icon:'success'
						})
					}
				})
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:'https://www.ghhlkj.com/api/saveFile',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(JSON.parse(res.data),'sssssssssss');
							this.form.homeTypeImg.push(JSON.parse(res.data).url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.form.homeTypeImg.splice(event.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		background-color: #ffffff;
		.roomPic{
			margin-top: 44px;
			padding: 40rpx 24rpx;
			.title{
				font-weight: bold;
			}
			.upload{
				margin-top: 40rpx;
			}
		}
		.name,.price,.area,.amount{
			display: flex;
			padding: 0 24rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #fbfbfb;
			.title{
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}
			.content{
				flex:2;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
				
			}
		}
		.amount{
			border-bottom: 1rpx solid #fbfbfb;
		}
		.number{
			.title{
				padding: 0 24rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}
			.content{
				padding: 0 24rpx;
				display: flex;
				flex-wrap:wrap
			}
			.sinput{
				margin-right: 30rpx;
				margin-bottom: 20rpx;
				width: 146rpx;
				height: 88rpx;
				background-color:#f6f6f6 ;
				border-radius: 8rpx;
				position: relative;
				.inputs{
					width: 140rpx;
					height: 88rpx;
					background-color:#f6f6f6 ;
					text-align: center;
					border-radius: 8rpx;
				}
				.del{
					position: absolute;
					right: -9.5px;
					top: -6.5px;
					background-color:#a8a8a8 ;
					width: 15px;
					height: 15px;
					border-radius: 7.5px;
					font-size: 9px;
					line-height: 15px;
					text-align: center;
					font-weight: normal;
					color: #ffffff;
				}
			}
			.addinput{
				margin-right: 30rpx;
				margin-bottom: 20rpx;
				width: 140rpx;
				height: 88rpx;
				background-color:#f6f6f6 ;
				line-height: 88rpx;
				text-align: center;
				color:#a8a8a8 ;
				font-size: 40rpx;
			}
			
			
		}
		.describe,.facility,.tips{
			.title{
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #242424;
			}
			.content{
				padding: 0 24rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #484848;
				line-height: 60rpx;
			}
		}
		
	}
</style>